<template>
  <ContentWrap :title="'订单信息'" class="!mb-10px">
    <template #header>
      <slot name="tool"></slot>
    </template>
    <el-scrollbar height="220px">
      <el-row class="custom-text-14">
        <el-col :span="12">
          <div class="mb-15px">
            订单号: <span class="ml-5px"> {{ orderData.no }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            服务时间: <span class="ml-5px"> {{ formatDate(orderData.tradeTime!) }}</span>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="mb-15px">
            订单来源:
            <dict-tag :type="DICT_TYPE.TENANT_IDENTITY" :value="orderData.source" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            订单渠道:
            <el-tag class="ml-5px">{{ orderData.terminal! }}</el-tag>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px"> &nbsp; </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px"> &nbsp; </div>
        </el-col>
        <el-divider border-style="dashed" class="mt-0! mb-15px!" />

        <el-col :span="12">
          <div>
            服务次数:
            <span class="ml-5px"> {{ orderData.productCount }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            消耗业绩:
            <span class="ml-5px"> {{ fenToYuan(orderData.performancePrice!) }} 元</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            服务手工:
            <span class="ml-5px"> {{ fenToYuan(orderData.servicesPrice!) }} 元</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            补差金额:
            <span class="ml-5px"> {{ fenToYuan(orderData.servicesPrice!) }} 元</span>
          </div>
        </el-col>
      </el-row>
    </el-scrollbar>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'

defineOptions({ name: 'OrderBasicInfo' })

defineProps({
  orderData: propTypes.object.def({})
})
</script>
